<template>
  <div class="payment-detail">
    <order-detail :list="list" status="交易成功" @onBack="back" @onItemClick="onItemClick"
                  icon="logistics" isFinish="true">
      <template #info>
        <div class="cell-float margin-bottom">
          <span>付款时间</span>
          <span class="cell-value-1">2021-12-12 22:22:22</span>
        </div>
        <div class="cell-float margin-bottom">
          <span>发货时间</span>
          <span class="cell-value-1">2021-12-12 22:22:22</span>
        </div>
      </template>
      <template #buttons>
        <div class="card-goods-content">
          <span class="bttom-button">加入购物车</span>
          <span class="bttom-button" @click="openRefund">申请售后</span>
        </div>
      </template>
      <template #footer>
        <div class="order-bottom-buttons">
          <span class="bttom-button"  >加入购物车</span>
          <span class="bttom-button" @click="openExpress">查看物流</span>
          <span class="bttom-button button-pay">评价</span>
        </div>
      </template>

    </order-detail>
  </div>
</template>

<script>

import OrderDetail from '@/components/OrderDetail'

export default {
  name: 'detail',
  components: {OrderDetail},
  data () {
    return {
      list: [
        {
          name: '雾缘蒸汽',
          goods: [{
            id: 1,
            checked: false,
            goodsName: '测试标题',
            price: 111,
            number: 2,
            picUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },
          {
            id: 1,
            checked: false,
            goodsName: '测试标题',
            price: 111,
            number: 2,
            picUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          }]
        }]
    }
  },
  methods: {
    openExpress () {
      this.$router.push({name: 'express'})
    },
    onItemClick (item) {
      this.$router.push({name: 'NoDelivery'})
    },
    back () {
      this.$router.back()
    },
    openRefund () {
      this.$router.push({name: 'refund'})
    }
  }
}
</script>

<style scoped>
.express-status{
  margin: 0 20px;
  flex: 1;
}
.order-bottom-buttons {
  left: 0;
  padding: 10px;
  background: white;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  position: fixed;
  right: 0;
  bottom: 0;

}
.express-info{
  width: 360px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
.bttom-button {
  margin-right: 5px;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  border: 1px #c5c5c5 solid;
}

.button-pay {
  color: #E65D6E;
  border: 1px #E65D6E solid;

}

.payment-detail {
  flex: 1;
  height: 100%;
}
.status{
  width: 100px;
  font-size: 12px;
  color: #c5c5c5;
}
span {
  padding: 0;
  margin: 0;
}
</style>
